<template>
    <div class="share">
        <van-popup v-model="show" position="bottom" class="share-pop" closeable @click="()=>show = false" @open="getQRCode">
            <div class="share-box" ref="shareBox" @click.stop="()=>{}">
                <p class="font-52 font-700 text-center mb-40 px-20">输入我的邀请码最高领取金额</p>
                <p class="font-52 font-700 text-center px-20">18USDT</p>
                <figure class="text-center px-20"><img class="box-img" src="@/assets/image/invite/1964.png"></figure>
                <div class="box-footer">
                    <div class="flex items-center">
                        <figure class="text-center mr-6"><img class="footer-img" src="@/assets/image/invite/logo.png"></figure>
                        <div>
                            <p class="font-44 font-600">分布式金融</p>
                            <p class="font-24">www.demo.com</p>
                        </div>
                    </div>
                    <figure><img class="qr-img" ref="qrImg" src=""></figure>
                </div>
            </div>
            <div class="share-footer" @click.stop="()=>{}">
                <div v-for="(value,key,index) in caseList" :key="index" class="footer-box">
                    <p class="font-14">{{ key }}</p>
                    <div class="box-case">
                        <p class="font-14 font-Omit flex-1">{{ value }}</p>
                        <figure @click.stop="copy(value)"><img class="case-img" src="@/assets/image/home/copy.png"></figure>
                    </div>
                </div>
                <figure class="footer-download" @click.stop="downloadQr">
                    <img class="download-img" src="@/assets/image/invite/download.png">
                </figure>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup } from 'vant';
import QRCode from "qrcode";
import html2canvas from "html2canvas";
import { saveBasePic } from '@/utils/index.js';
export default {
    components:{
        [Popup.name]: Popup,
    },
    data() {
        return {

        }
    },
    props:{
        isShow:{
            type:Boolean,
            default:false,
        },
        caseList:{
            type:Object,
            default:()=>{}
        }
    },
    mounted() {
    },
    computed:{
        show:{
            get(){
                return this.isShow
            },
            set(val){
                this.$emit('popChange',val);
            }
        }
    },
    methods: {
        getQRCode(){
            let text = this.caseList['邀请链接'];
            let opts = {
                errorCorrectionLevel: "H",//容错级别
                type: "image/png",//生成的二维码类型
                quality: 0.3,//二维码质量
                margin: 1,//二维码留白边距
                text: text,//二维码内容
                color: {
                    dark: "#000",//前景色
                    light: "#fff"//背景色
                }
            };
            this.$nextTick(()=>{
                const imgDom = this.$refs['qrImg'];
                QRCode.toDataURL(text,opts, function (err, url) {
                    if (err) {
                        throw err
                    }
                    imgDom.src = url
                })
            })
        },
        // 复制
        copy(val){
            this.$copyText(val).then(message => {
                this.$toast({message:this.$t('复制成功'),className:'maxZindex'});
            }).catch(err => {})
        },
        downloadQr() {
            html2canvas(this.$refs['shareBox']).then(function (canvas) {
                const bese64 = canvas.toDataURL("image/png", 1.0);
                try{
                    saveBasePic(bese64,'qrCode.png')
                }catch(error){
                    let a = document.createElement("a");
                    a.href = bese64;
                    document.body.appendChild(a);
                    a.download = 'qrCode.png';
                    // 模拟a标签的点击事件
                    var e = document.createEvent("MouseEvents");
                    e.initEvent("click", true, true);
                    a.dispatchEvent(e);
                }
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.share{
    ::v-deep .share-pop{
        height: 100%;
        width: 100%;
        background-color: #7B7B7C;
        z-index: 99999 !important;
        .van-popup__close-icon{
            color: #000;
            font-size: 56px;
        }
        .share-box{
            margin: 140px 50px;
            background: #000;
            padding-top: 88px;
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
            .box-img{
                width: 422px;
                height: 420px;
            }
            .box-footer{
                background-color: #fff;
                padding: 24px;
                color: #000;
                display: flex;
                justify-content: space-between;
                gap: 20px;
                .qr-img{
                    width: 200px;
                    height: 200px;
                }
                .footer-img{
                    width: 128px;
                    height: 128px;
                }
            }
        }
        .share-footer{
            margin: 0px 50px;
            padding-bottom: 40px;
            .footer-box{
                border-radius: 20px;
                height: 76px;
                background-color: #fff;
                margin-bottom: 28px;
                padding: 0 42px;
                display: flex;
                justify-content: space-between;
                color: #000;
                align-items: center;
                box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
                .box-case{
                    display: flex;
                    text-align: right;
                    align-items: center;
                    width: 240px;
                    gap: 16px;
                    .case-img{
                        width: 24px;
                        height: 24px;
                    }
                }
            }
            .footer-download{
                width: 128px;
                height: 128px;
                margin: 0 auto;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
                .download-img{
                    width: 48px;
                    height: 48px;
                }
            }
        }
    }
}
</style>